﻿<!-- 弹出编辑窗体表单 -->
  <div id="amapwindow" class="easyui-window"
       title="水表维护"
       data-options="modal:true,
                    closed:true,
                    minimizable:false,
                    collapsible:false,
                    maximized:false,
                    iconCls:'icon-more',
                    footer:'#windowfooter',
                    closeDuration:200,
                    closeAnimation:'slide',
                    openDuration:300,
                    openAnimation:'slide',
                    onBeforeClose:function(){

                    },
                    onOpen:function(){
                       $(this).window('vcenter');
                       $(this).window('hcenter');
                    },
                    onRestore:function(){
                    },
                    onMaximize:function(){
                    }
                    " style="width:900px;height:450px;display:none">


    <div id="mapcontainer">
     
    </div>
  </div>
 
<!-- 弹出窗体form表单 -->
<!-- 弹出编辑对话框 -->
<!--begin popup detailview javascript block -->
<script type="text/javascript">
  //判断新增编辑状态
  var map = {};
  var markers = [];
  var arraymeterid = [];
  function openamapwindow(meterid) {
    arraymeterid = meterid;
    loadmap()

    $('#amapwindow').window('open');
    
    
    
  }

  function loadmap() {

    map = new AMap.Map('mapcontainer', {
      resizeEnable: true, //是否监控地图容器尺寸变化
      zoom: 18, //初始化地图层级
    });
    map.on('zoomchange', function (e) {
      const zoom = map.getZoom();
      console.log(zoom)
      if (zoom >= 16) {
        $('.info_label').show();
      } else {
        $('.info_label').hide();
      }
    });
    //定位
    var options = {
      'showButton': true,//是否显示定位按钮
      'buttonPosition': 'LB',//定位按钮的位置
      /* LT LB RT RB */
      'buttonOffset': new AMap.Pixel(10, 20),//定位按钮距离对应角落的距离
      'showCircle': true,//是否显示定位精度圈
      'circleOptions': {//定位精度圈的样式
        'strokeColor': '#0093FF',
        'noSelect': true,
        'strokeOpacity': 0.5,
        'strokeWeight': 1,
        'fillColor': '#02B0FF',
        'fillOpacity': 0.25
      }
    }
    AMap.plugin(["AMap.Geolocation"], function () {
      var geolocation = new AMap.Geolocation(options);
      map.addControl(geolocation);
      geolocation.getCurrentPosition()
    });

    $.get('/ZoneWaterMeters/GetAllWaterMeterLoc').done(res => {
      console.log(res, arraymeterid);
      let inarray = [];
      arraymeterid.forEach((item,index) => {
        if (!res.map(it => it.meterId).includes(item)) {
          toastr.error(`表号: ${item} 没有找到具体坐标`);
        } else {
          inarray.push(item);
        }
      })
      res.forEach(meter => {
        if (inarray.includes(meter.meterId)) {
          map.setCenter([meter.longitude, meter.latitude]); //设置地图中心点
          marker = new AMap.Marker({
            extData: {
              "meter": meter,
              "zoneid": meter.zoneId
            },
            icon: "/Content/img/marker.png",
            position: [meter.longitude, meter.latitude],
            draggable: false,
            cursor: 'move',
            // 设置拖拽效果
            raiseOnDrag: true,
            offset: new AMap.Pixel(0, 0)
          });
          const fal = meter.direct == 1 ? "fa-sign-in-alt" : "fa-sign-out-alt";
          const btn = meter.direct == 1 ? "btn-primary" : "btn-success";
          marker.setLabel({
            offset: new AMap.Pixel(-10, - 40),  //设置文本标注偏移量
            content: `<div class='info_label' id='${meter.meterId}'>
                      <div class="d-flex mt-2 mb-1 fs-xs text-primary">
                            表号:${meter.meterId}
                            表显:${meter.water}
                            
                  </a>
                      </div>
                 
                      <div class="d-flex mt-2 mb-1 fs-xs text-primary">
                            使用单位：${meter.customerName}
                      </div>
                      
                      </div>`, //设置文本标注内容
            direction: 'right' //设置文本标注方位
          });
          //
          marker.on('click', function (e) {
            const meterid = e.target.getExtData().meter.meterId;
            const position = e.target.getPosition()
            console.log(meterid, position);
            openInfo(meterid, position)
          })
          marker.on('mouseover', function (e) {
            const meterid = e.target.getExtData().meter.meterId;

            $('#' + meterid).show()
          });
          marker.on('mouseout', function (e) {
            const meterid = e.target.getExtData().meter.meterId;

            $('#' + meterid).hide()
          });
          marker.setMap(map);

          //打开详细信息窗体
          //在指定位置打开信息窗体
        } else {
         
        }
        async function openInfo(meterid, position) {
          //构建信息窗体中显示的内容
          var meter = await $.get(`/WaterMeters/GetMeterWith?meterid=${meterid}`);
          var info = [];
          info.push("<div class='input-card content-window-card'><div></div> ");
          info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>水表信息</h4>");
          info.push("<div class='row'>");
          info.push(`<div class="col-6">表号 : ${meter.meterId}</div>  <div class="col-6"> 表显 : ${meter.water}</div>`);
          info.push("</div><div class='row'>");
          info.push(`<div class="col-6">水表状态 : ${meter.Status || ''}</div>   <div class="col-6">阀门状态 : ${meter.valveStatus || ''}</div>`);
          info.push("</div><div class='row'>");
          info.push(`<div class="col-6">口径 : ${meter.meterSize || ''}</div>  <div class="col-6"> 类型 : ${meter.meterType || ''}</div>`);
          info.push("</div><div class='row'>");
          info.push(`<div class="col-12">使用单位 :</span> ${meter.CustomerName || ''}</div>`);
          info.push(`</div >`);
          info.push(`</div >`);

          infoWindow = new AMap.InfoWindow({
            content: info.join(""),  //使用默认信息窗体框样式，显示信息内容
            offset: new AMap.Pixel(12, -3)
          });

          infoWindow.open(map, position);
        }
      });
    });

    
  }
    

</script>

